<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/demo.css">
    <link rel="stylesheet" href="../css/touwei.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/shopping.css">
    <style>
        .main-box2>table {
            width: 100%;
            margin: 100px auto;
            text-align: center;
            border: 1px solid gainsboro;
            border-collapse: collapse;
        }

        .main-box2 td {
            border: 1px solid gainsboro;
            font-size: 14px;
        }

        td>img {
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }

        .main-box2 th {
            background: gainsboro;
            height: 2.5em;
            /* margin: 0 auto; */
            border: 1px solid gray;
        }

        .main-box2 tr {
            height: 2.5em;
            margin: 0 auto;
            text-align: center;
        }

        .button1 {
            width: 100px;
            height: 30px;
            background-color: black;
            color: aliceblue;
            display: inline-block;
            margin: 20px;
        }
    </style>
</head>

<body>
    <header>
        <!-- 头部 -->
        <div class="header_l" class="gray">
            <p>专柜查询</p>
            <p>帮助中心</p>
        </div>
        <div id="header_m">
            <h2>ARMANI
                <p>beauty</p>
            </h2>


        </div>
        <div class="header_r">
            <p class="button">登录与注册</p>
            <p>我的购物袋
            </p>
        </div>

    </header>


    <!-- 中间部分 -->

    <main>

        <div class="main-box1">
            <span>1我的购物袋</span>
            <span>2提交订单</span>
        </div>

        <div class="main-box2">
            <p>我的购物袋></p>
            <!-- 购物车 -->
            <table>
                <tr>
                    <th>商品名称</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>
                        <img class="imgs" src="../images/02 (2).png" alt="">
                        <span> 阿玛尼黑钥匙至臻奂颜修护眼霜</span>
                        <span>30ml</span>
                    </td>
                    <td>
                        <button>-</button>
                        <span class="goods-num">0</span>
                        <button id="test">+</button>
                    </td>
                    <td>
                        单价: <span>799</span>
                    </td>
                    <td>
                        小计: <span class="goods-subtotal">0</span>
                    </td>
                    <td>
                        操作: <input type="button" value="删除">
                    </td>
                </tr>
                <!-- <tr>
                    <td>
                        <img src="../images/0810-2.png" alt="">
                        <span>阿玛尼大师「蓝气垫」造型轻垫粉底液</span>
                    </td>
                    <td>
                        <button>-</button>
                        <span class="goods-num">0</span>
                        <button>+</button>
                    </td>
                    <td>
                        单价: <span>999</span>
                    </td>
                    <td>
                        小计: <span class="goods-subtotal">0</span>
                    </td>
                    <td>
                        操作: <input type="button" value="删除">
                    </td>
                </tr> -->
                <tr>
                    <td colspan="5">
                        <span class="goods-total-num">0</span> 件商品, 共计花费 <span class="goods-total-price">0</span> 元。
                        <div>
                            <!-- <span> 继续购物</span> -->
                            <button class="button1">立即结算</button>
                            <!-- <input type="button" name="立即结算" id="" value="立即结算"> -->
                        </div>
                    </td>

                </tr>
            </table>



        </div>





    </main>


    <!-- 尾部 -->
    <footer>

        <div class="footer_o">
            <div class="footer_o1"><span>专柜查询</span>
                <input type="text">
            </div>
            <div class="footer_o2">
                <span>关注我们</span>
                <div class="footer_o2_one">
                    <img src="../images/li3.png" alt="">
                    <div class="footer_o2_one1">

                    </div>
                </div>

                <div class="footer_o2_two">
                    <img src="../images/li5.png" alt="">
                    <div class="footer_o2_two1">
                        <img src="../images/erweima.2dbf6911.jpg" alt="">
                    </div>
                </div>
                <div class="footer_o2_there">
                    <img src="../images/li16.png" alt="">
                    <div class="footer_o2_there1">
                        <img src="../images/erweima.2dbf6911.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="footer_t">
            <table cellspacing="0px" cellpading="0px">
                <tr>
                    <th>彩妆专区</th>
                    <th>护肤专区</th>
                    <th>香水专区</th>
                    <th>明星产品</th>
                    <th>帮助中心</th>
                </tr>
                <tr>
                    <td>唇部</td>
                    <td>「黑钥匙」护肤系列</td>
                    <td>男士</td>
                    <td>阿玛尼[传奇红管J唇釉</td>
                    <td>常见问题</td>
                </tr>
                <tr>
                    <td>面部</td>
                    <td>光钥新肌护肤系列</td>
                    <td>女士</td>
                    <td>阿玛尼大师[蓝气垫J</td>
                    <td>订单查询</td>
                </tr>
                <tr>
                    <td>眼部</td>
                    <td>清洁防晒综合系列</td>
                    <td></td>
                    <td>阿玛尼自我无界香水</td>
                    <td>订单查询</td>
                </tr>
                <tr>
                    <td>美容工具</td>
                    <td>男士综合护肤系列</td>

                </tr>
            </table>
        </div>
        <div class="footer_th">
            <img src="../images/li8.png" alt="">
            <p>国家药监局提示您:宣称用于祛斑美白、防晒、染发、烫发等的化妆品为特殊用途化妆品，产品标签上应标注国妆特字或者“国妆特进字的标准文号。</p>
            <p>
                <span>沪公网安备31010602001530号中国工商 沪ICP备08100043号 21</span>

            </p>
            <p class="footer_th_m">OL'Oreal China欧莱雅(中国)有限公司版权所有</p>
            <p>GIORGIO ARMANI阿玛尼美妆中国官网，GIORGIO ARMANI阿玛尼美妆天猫旗舰店，阿玛尼美妆官方微信精品商城，为官方认证渠道。</p>
        </div>
    </footer>
</body>

</html>
<script>
    class Cart {
        //更新货物总数量
        updateGoodsTotalNum() {
            let oGoodsNum = document.getElementsByClassName("goods-num");
            let goodsNum = 0;

            for (let i = 0; i < oGoodsNum.length; i++) {
                goodsNum += oGoodsNum[i].innerHTML / 1;
            }

            let oGoodsTotalNum = document.getElementsByClassName("goods-total-num")[0];
            oGoodsTotalNum.innerHTML = goodsNum;
        }

        //更新货物总价格
        updateGoodsTotalPrice() {
            let oGoodsSubTotal = document.getElementsByClassName("goods-subtotal");
            let goodsSubTotal = 0;

            for (let i = 0; i < oGoodsSubTotal.length; i++) {
                goodsSubTotal += oGoodsSubTotal[i].innerHTML / 1;
            }

            let oGoodsTotalPrice = document.getElementsByClassName("goods-total-price")[0];

            oGoodsTotalPrice.innerHTML = goodsSubTotal;
        }

        goodsAdd(btn) {
            //思路:四个数值的改变
            //1.数量
            let oGoodsNum = btn.previousElementSibling;
            oGoodsNum.innerHTML = oGoodsNum.innerHTML / 1 + 1;
            //2.小计
            let oGoodsPrice = btn.parentNode.nextElementSibling.firstElementChild;
            let oGoodsSubTotal = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;

            oGoodsSubTotal.innerHTML = oGoodsNum.innerHTML * oGoodsPrice.innerHTML;
            //3.总数
            this.updateGoodsTotalNum();
            //4.总价
            this.updateGoodsTotalPrice();
        }

        goodsMin(btn) {
            let oGoodsNum = btn.nextElementSibling;

            if (oGoodsNum.innerHTML > 0) {
                oGoodsNum.innerHTML = oGoodsNum.innerHTML / 1 - 1;

                //2.小计
                let oGoodsPrice = btn.parentNode.nextElementSibling.firstElementChild;
                let oGoodsSubTotal = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;

                oGoodsSubTotal.innerHTML = oGoodsNum.innerHTML * oGoodsPrice.innerHTML;
                //3.总数
                this.updateGoodsTotalNum();
                //4.总价
                this.updateGoodsTotalPrice();
            }
        }

        goodsDel(btn) {
            let oTr = btn.parentNode.parentNode;
            oTr.remove();
            //3.总数
            this.updateGoodsTotalNum();
            //4.总价
            this.updateGoodsTotalPrice();
        }

        eventBind() {
            // 所有加号按钮.onclick = function(){
            //     this.goodsAdd(this);
            // }
            let that = this; //为了在事件体中，获取new出来的购物车对象
            // let oTest = document.getElementById("test");
            // oTest.onclick = function() {
            //     that.goodsAdd(this);
            // }
            let oBtns = document.getElementsByTagName("button");

            for (let i = 0; i < oBtns.length; i++) {
                if (i % 2 == 0) {
                    oBtns[i].onclick = function () {
                        that.goodsMin(this);
                    }
                } else {
                    oBtns[i].onclick = function () {
                        that.goodsAdd(this);
                    }
                }
            }

            let oDelBtns = document.getElementsByTagName("input");
            for (let i = 0; i < oDelBtns.length; i++) {
                oDelBtns[i].onclick = function () {
                    that.goodsDel(this);
                }
            }
        }
    }

    let c = new Cart();
    c.eventBind();
</script>
<script src="./jQuery.js"></script>

<script>// 渲染图片和数量的接口
    window.onload = function () {
        $.getJSON("../goodsAndShoppingCart/getGoodsList.php", { typeId: 3 }, function (date) {
            console.log(date);
            dates = date[3]
            $(".imgs")[0].src = `${dates.goodsImg}`
            $(".goods-num")[0].innerHTML = `${dates.goodsCount}`
        })
    }
    // 现在缺少的是update，就是给购物车 增加
</script>

<script>

    //  + 加
    $.post('goodsAndShoppingCart/addShoppingCart.php', { vipName: "hhh_111", goodsId: `202`, goodsCount: 1 }, function () {
        $.post('goodsAndShoppingCart/getShoppingCart.php', { vipName: "hhh_111", goodsId: `202` }, function (res) {
            res = JSON.parse(res)
            console.log(res[0].goodsCount)
        })
    })


</script>
<script>
    //  -   减
    $.post('goodsAndShoppingCart/addShoppingCart.php', { vipName: "hhh_111", goodsId: `202`, goodsCount: -1 }, function () {
        $.post('goodsAndShoppingCart/getShoppingCart.php', { vipName: "hhh_111", goodsId: `202` }, function (res) {
            res = JSON.parse(res)
            console.log(res[0].goodsCount)
        })
    })

</script>

<script>
    //  -   删除
    $.post('goodsAndShoppingCart/deleteGoods.php', { vipName: "hhh_111", goodsId: `202`, goodsCount: -1 }, function () {
        $.post('goodsAndShoppingCart/getShoppingCart.php', { vipName: "hhh_111", goodsId: `202` }, function (res) {
            res = JSON.parse(res)
            console.log(res[0].goodsCount)
        })
    })

</script>